// Name: map.js
// Description: A script to construct a google map centered
// at Morris, IL in the map_canvas container of an html
// document. It also constructs a google map centered on the United States,
// with a line between two markers on the US map.
// Originally written by: Tanya L. Crenshaw
// Edited by: Sam Burich and Chris Lewis on 9/15/2011

function initialize(){

    // Initialize map information

    // The center point of the map is Morris, IL
    var latlng = new google.maps.LatLng(41.375278, -88.428056);

	//Initialize options for the map
    var myOptions = {
        zoom: 10,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
           
    // Draw the map using the options defined above.
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
            
    // Create a marker at the initial center position of the map.
    // The "title" is what is displayed when the user hovers over 
    // the marker.  This is called a Google Maps "tooltip".
    var marker = new google.maps.Marker({
        position: latlng, 
        map: map, 
        title:"Morris, IL"
    });

    // Create the polygon that outlines zipcode 97303
    // Call the function constructZipCodeArray() to 
    // get the path of geopgraphical points.
    zipCodeArea = new google.maps.Polygon({
        paths: constructZipCodeArray(),
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#FF0000",
        fillOpacity: 0.35
    });

    // Draw the polygon on the map.
  	zipCodeArea.setMap(map);
   
    //Create a new Google map of the United States with a marker for the US and a marker for Morris, IL
    var usLatLng = new google.maps.LatLng(38, -97);

	//Initialize second map options
    var usOptions = {
        zoom: 3,
        center: usLatLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
           
    // Draw the map using the options defined above.
    var usMap = new google.maps.Map(document.getElementById("usmap_canvas"),
        usOptions);
            
    // Create a marker at the initial center position of the map.
    // The "title" is what is displayed when the user hovers over 
    // the marker.  This is called a Google Maps "tooltip".
    var usMarker = new google.maps.Marker({
        position: usLatLng, 
        map: usMap, 
        title:"United States"
   });
   //Create a marker at Morris
    var morrisMarker = new google.maps.Marker({
        position: latlng, 
        map: usMap, 
        title:"Morris, IL"
    });
    
    //Draw a line between the two markers
	//Set the coordinates
  	var pathCoordinates = [
        usLatLng,
        latlng
  	];
  	//Create the line
    var path = new google.maps.Polyline({
        path: pathCoordinates,
        strokeColor: "#FF0000",
        strokeOpacity: 1.0,
        strokeWeight: 2
    });
    //Draw the line on the US map
    path.setMap(usMap);
}    